<style lang="less">
@import './home.less';
@import '../../styles/common.less';
</style>

<template>
  <div>
    <!-- <div v-show="currNav=='sys'"> -->
    <div>
      <div>
        <Row :gutter="10">
          <Col :xs="24"
               :sm="12"
               :md="4"
               :style="{marginBottom: '10px'}">
          <infor-card id-name="user_created_count"
                      :end-val="count.passengerCount"
                      custom="i-icon i-icon-regular-bus"
                      color="#2d8cf0"
                      intro-text="班线客运"></infor-card>
          </Col>
          <Col :xs="24"
               :sm="12"
               :md="4"
               :style="{marginBottom: '10px'}">
          <infor-card id-name="visit_count"
                      :end-val="count.travelCount"
                      custom="i-icon i-icon-touring-bus"
                      color="#50bbe7"
                      :iconSize="50"
                      intro-text="旅游客运"></infor-card>
          </Col>
          <Col :xs="24"
               :sm="12"
               :md="4"
               :style="{marginBottom: '10px'}">
          <infor-card id-name="collection_count"
                      :end-val="count.dangerCount"
                      custom="i-icon i-icon-dangerous-vechicle"
                      color="#f25e43"
                      intro-text="危险货物运输"></infor-card>
          </Col>
          <Col :xs="24"
               :sm="12"
               :md="4"
               :style="{marginBottom: '10px'}">
          <infor-card id-name="transfer_count"
                      :end-val="count.generalCount"
                      custom="i-icon i-icon-general-cargo"
                      color="#ffd572"
                      intro-text="普通货运"></infor-card>
          </Col>
          <Col :xs="24"
               :sm="12"
               :md="4"
               :style="{marginBottom: '10px'}">
          <infor-card id-name="online_count"
                      :end-val="count.onlineCount"
                      iconType="ios-globe"
                      color="#36d199"
                      intro-text="在线车辆"></infor-card>
          </Col>
          <Col :xs="24"
               :sm="12"
               :md="4"
               :style="{marginBottom: '10px'}">
          <infor-card id-name="total_count"
                      :end-val="count.totalCarCount"
                      iconType="md-bus"
                      color="#41c8d7"
                      intro-text="车辆总数"></infor-card>
          </Col>
        </Row>
        <Row :gutter="10">
          <Col :xs="24"
               :sm="12"
               :md="7">
          <Card>
            <p slot="title"
               class="card-title">
              <Icon type="ios-help-buoy" />天气情况
            </p>
            <div>
              <Row>
                <weather></weather>
              </Row>
            </div>
          </Card>
          <Card style="margin-top:10px;">
            <p slot="title"
               class="card-title">
              <Icon type="ios-help-buoy" />车辆分布
            </p>
            <div>
              <Row>
                <carAreaPie :dataSource="cityData"></carAreaPie>
              </Row>
            </div>
          </Card>
          </Col>
          <Col :xs="24"
               :sm="12"
               :md="17">
          <Row :gutter="10">
            <Col :xs="24"
                 :sm="12"
                 :md="16">
            <Card>
              <div>
                <Row>
                  <home-map :city-data="cityData"></home-map>
                </Row>
              </div>
            </Card>
            </Col>
            <Col :xs="24"
                 :sm="12"
                 :md="8">
            <Card>
              <p slot="title"
                 class="card-title">
                <Icon type="ios-help-buoy" />报警类型分布
              </p>
              <div>
                <Row>
                  <alarmPie :dataSource="alarmTop10"></alarmPie>
                </Row>
              </div>
            </Card>
            </Col>
          </Row>
          <Row>
            <Card style="margin-top:10px;">
              <p slot="title"
                 class="card-title">
                <Icon type="ios-help-buoy" />报警类型分布
              </p>
              <div>
                <Row>
                  <smooth-line :LineDataSource="alarmLine"></smooth-line>
                </Row>
              </div>
            </Card>
          </Row>
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
import homeMap from './components/map.vue'
import visiteVolume from './components/visiteVolume.vue'
import userFlow from './components/userFlow.vue'
import countUp from './components/countUp.vue'
import inforCard from './components/inforCard.vue'
import carAreaPie from './components/carAreaPie.vue'
import alarmPie from './components/alarmPie.vue'
import smoothLine from './components/smoothLine.vue'
import weather from './components/weather.vue'
import show from './show.vue'
import Cookies from 'js-cookie'
import { getHomeSum, getHomeChart } from '@/api/index'

export default {
  name: 'home',
  components: {
    homeMap,
    visiteVolume,
    userFlow,
    countUp,
    inforCard,
    carAreaPie,
    alarmPie,
    smoothLine,
    weather,
    show
  },
  data() {
    return {
      showVideo: false,
      count: {
        dangerCount: 0,
        generalCount: 1,
        onlineCount: 1,
        passengerCount: 1,
        totalCarCount: 3,
        travelCount: 1
      },
      cityData: [],
      alarmTop10: [],
      alarmLine: [],
      newToDoItemValue: '',
      city: '',
      weather: '',
      username: ''
    }
  },
  computed: {
    currNav() {
      return this.$store.state.app.currNav
    },
    avatarPath() {
      return localStorage.avatorImgPath
    }
  },
  methods: {
    init() {
      let userInfo = JSON.parse(Cookies.get('userInfo'))
      this.username = userInfo.username
      this.getHomeSum()
      this.getHomeChart()
    },
    getHomeSum() {
      getHomeSum().then(res => {
        if (res.code == 0) {
          this.cityData = res.data.areaCount
          this.count = res.data.carsCount
          this.alarmTop10 = res.data.alarmTop10
        }
      })
    },
    getHomeChart() {
      getHomeChart().then(res => {
        if (res.code == 0) {
          this.alarmLine = res.data.alarmFullYearChart
        }
      })
    }
  },
  mounted() {
    this.init()
  }
}
</script>
